<template>
  <div class="about">
    <!-- button 按钮组 -->
    <div class="module-wrap">
      <h5 class="tag-blue">button 按钮组件</h5>
      <div class="module-wrap">
        <fy-button @click="login" value="登录" size="large"></fy-button>
        <fy-negative-button @click="cancel" value="取消" size="large"></fy-negative-button>
      </div>
    </div>
    <!-- toast 提示组件 -->
    <div class="module-wrap">
      <h5 class="tag-blue">toast 提示组件</h5>
      <div class="module-wrap">
        <fy-button @click="login" value="toast" size="large"></fy-button>
      </div>
    </div>
    <!-- checkbox 多选框组件 -->
    <div class="module-wrap">
      <h5 class="tag-blue">checkbox 多选框组件</h5>
      <div class="module-wrap">
        <fy-chat-checkbox
          :vModelValue="item.checked"
          :for-id="item.chatUserId"
          :id="item.chatUserId"
          :name="item.chatUserId"
          @change="check($event, item)"
        ></fy-chat-checkbox>
      </div>
    </div>
    <!-- 消息打扰样式组件 -->
    <div class="module-wrap">
      <h5 class="tag-blue">消息打扰样式组件</h5>
      <div class="module-wrap">
        <fy-message-notify :isDisturb="item.disturb" :unReadNum="item.unReadNum"></fy-message-notify>
      </div>
    </div>

    <!-- 对话信息组件 -->
    <div class="module-wrap">
      <h5 class="tag-blue">对话信息组件</h5>
      <div class="module-wrap">
        <fy-chat-content
          :chatTime="item.addTime"
          chatObject="翠花"
          :content="item.content"
          sendState="read"
          :imgLinkUrl="require('@img/logo.png')"
          :pictureUrl="require('@img/logo.png')"
          v-for="(item, indexD) in recommendList"
          :key="indexD"
        ></fy-chat-content>
      </div>
    </div>
    <!-- 切换组件 -->
    <div class="module-wrap">
      <h5 class="tag-blue">切换组件</h5>
      <div class="module-wrap">
        <fy-chat-x-switch title @on-change="updateSetTop" :vModelValue="item.placement"></fy-chat-x-switch>
      </div>
    </div>
    <!-- 时间轴组件 -->
    <!-- <div class="module-wrap" style="margin-bottom: 100px;">
      <h5></h5>
      <div class="module-wrap">
         <fy-chat-time-line :recommendList="recommendList"></fy-chat-time-line>
      </div>
    </div>-->
    <!-- 头部组件 -->
    <div class="module-wrap">
      <div class="module-wrap">
        <fy-head-title chatObject="KUI"></fy-head-title>
      </div>
    </div>

    <!-- toggle switch -->
    <div class="module-wrap">
      <h5 class="tag-blue">toggle switch</h5>
      <div class="module-wrap">
        <fy-toggle-switch></fy-toggle-switch>
      </div>
    </div>

    <!-- alert -->
    <div class="module-wrap">
      <h5 class="tag-blue">alert</h5>
      <div class="module-wrap">
        <alert closable type="success">成功消息提示</alert>
        <br />
        <alert closable type="info">一般消息提示</alert>
        <br />
        <alert closable type="warn">警告消息提示</alert>
        <br />
        <alert closable type="error">错误消息提示</alert>
        <br />
        <alert :closable="false" type="info">不能关闭的消息提示</alert>
      </div>
    </div>

    <!-- confirm -->
    <div class="module-wrap">
      <h5 class="tag-blue" @click="confirmFun">confirm</h5>
      <div class="module-wrap">
        <confirm
          ref="myConfirm"
          @userBehavior="userBehaviorFun"
          titleText="消息头"
          content="消息内容"
          confirmText="确认"
          cancelText="取消"
          type="confirm"
        ></confirm>
      </div>
    </div>

    <!-- toolTip -->
    <!-- <div class="module-wrap">
      <div class="module-wrap">
        <tool-tip>
          <h5 class="tag-blue">tool tip</h5>
          <p slot="content" class="tooltip-content">我是内容分发的conent。</p>
        </tool-tip>
      </div>
    </div>-->

    <!-- tagsinput -->
    <div class="module-wrap">
      <h5 class="tag-blue">tags input</h5>
      <div class="module-wrap">
        <tags-input :source.sync="source" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "about",
  data() {
    return {
      item: {
        checked: true,
        chatUserId: "2019-11-16",
        disturb: false,
        unReadNum: 100,
        placement: true
      },
      recommendList: [
        {
          addTime: "2019-09-20T07:42:05.403+0000",
          content: "lalalal"
        },
        {
          addTime: "2019-09-20T07:42:05.403+0000",
          content: "lalalal"
        }
      ],
      source: ["英雄联盟", "骚猪", "对对对对对我是娇妹", "小轩在不在"]
    };
  },
  methods: {
    login() {
      this.$toast("toast 提示");
    },
    cancel() {
      this.$refs.myConfirm.show("注册成功！", {
        type: "alert",
        confirmText: "确定",
        titleText: "消息提示",
        data: "我是外界传进来的数据"
      });
    },
    check() {
    },
    updateSetTop() {
      this.$refs.myConfirm.show("是否要注册", {
        type: "confirm",
        confirmText: "确定",
        cancelText: "取消",
        titleText: "消息提示",
        data: "我是外界传进来的数据"
      });
    },
    userBehaviorFun() {},
    confirmFun() {
      this.$refs.myConfirm.show("是否要注册", {
        type: "confirm",
        confirmText: "确定",
        cancelText: "取消",
        titleText: "消息提示",
        data: "我是外界传进来的数据"
      });
    }
  }
};
</script>>

<style lang="scss" scoped>
.about {
  // text-align: left !important;
}
// 公共模块 包含 面包屑 title
.module-wrap {
  box-sizing: border-box;
  margin-bottom: 16px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  background: #fff;
}

.tag-blue {
  display: inline-block;
  padding: 4px 11px;
  margin: 16px 20px 16px 21px;
  background: #2ea0ff;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}
</style>
